<template>
  <view>
    <view class="searchBox"><my-search @click="mysearch"></my-search></view>

    <view>
      <!-- 轮播图 -->
      <swiper indicator-dots autoplay :interval="3000" :duration="1000" circular>
        <swiper-item v-for="item in swiperList" :key="item.goods_id" class="swiper">
          <navigator :url="item.navigator_url" class="swiper-item"><image :src="item.image_src" mode="aspectFill"></image></navigator>
        </swiper-item>
      </swiper>
      <!-- 分类导航数据 -->
      <view class="cate">
        <view class="cate-item" v-for="(item, index) in categoryList" :key="index" @click="toCate(item.name)"><image :src="item.image_src" mode=""></image></view>
      </view>
      <!-- 楼层数据  -->
      <view class="floor">
        <view class="floor-item" v-for="(item, index) in floorList" :key="index">
          <!-- 楼层的标题 -->
          <view class="floor-title"><image :src="item.floor_title.image_src"></image></view>
          <!-- 楼层的图片 -->
          <view class="box">
            <!-- 左边的大图片 -->
            <view class="left-floor">
              <image
                @click="toGoodsList(item.product_list[0].navigator_url)"
                :src="item.product_list[0].image_src"
                :style="{ width: item.product_list[0].image_width + 'rpx' }"
                mode="widthFix"
              ></image>
            </view>
            <!-- 右边的四个小图片 -->
            <view class="rigth-box">
              <block v-for="(sub, subindex) in item.product_list" :key="subindex">
                <image @click="toGoodsList(sub.navigator_url)" v-if="subindex !== 0" :src="sub.image_src" mode="widthFix" :style="{ width: sub.image_width + 'rpx' }"></image>
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import cartTotal from '../../mixins/cartTotal.js';
export default {
  mixins: [cartTotal],
  data() {
    return {
      swiperList: [], //轮播图数据
      categoryList: [], //分类导航的数据F
      floorList: [] //获取楼层数据
    };
  },
  methods: {
    // 获取轮播图数据
    async getSwiper() {
      const res = await uni.$http.get('/api/public/v1/home/swiperdata');
      if (res.data.meta.status === 200) {
        this.swiperList = res.data.message;
      } else {
        uni.$showMsg();
      }
    },
    // 获取分类列表
    async getCategory() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/catitems');
      if (res.meta.status !== 200) return uni.$showMsg();
      this.categoryList = res.message;
    },
    // 判断点击的是否是分类
    toCate(name) {
      if (name === '分类') {
        uni.switchTab({
          url: '/pages/cate/cate'
        });
      }
    },
    // 获取楼层数据
    async getFloorList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/floordata');
      if (res.meta.status !== 200) return uni.$showMsg();
      this.floorList = res.message;
    },
    // 楼层商品跳转的地址
    toGoodsList(url) {
      let query = url.split('?')[1];
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?${query}`
      });
    },
    mysearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      });
    }
  },
  onLoad() {
    this.getSwiper();
    this.getCategory();
    this.getFloorList();
  }
};
</script>

<style lang="scss">
.swiper {
  height: 330rpx;
  width: 100%;
  .swiper-item {
    height: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.cate {
  padding: 40rpx 0;
  display: flex;
  justify-content: space-around;
  .cate-item {
    width: 160rpx;
    height: 180rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.floor {
  // display: flex;
  .floor-title {
    width: 100%;
    height: 70rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .box {
    display: flex;
    .left-floor {
      margin-left: 16rpx;
    }
    .rigth-box {
      image {
        margin-left: 10rpx;
      }
    }
  }
}
.searchBox {
  position: sticky;
  top: 0;
  z-index: 9999;
}
</style>
